<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--部门数据-->
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" />
        </div>
        <div class="head-container">
          <el-tree style="height:700px;overflow:auto" :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="deptTreeRef" default-expand-all @node-click="handleNodeClick" />
        </div>
      </el-col>
      <el-col :span="20" :xs="24">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button plain icon="Refresh" @click="handleSynchronizationAll" :disabled="ids.length == 0">同步</el-button>
          </el-col>
        </el-row>
        <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="用户编号" align="center" key="userId" prop="userId" />
          <el-table-column label="用户姓名" align="center" key="nickName" prop="nickName" :show-overflow-tooltip="true" />
          <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" width="120" />
          <el-table-column label="状态" align="center" key="inSystemLabel" prop="inSystemLabel" width="120" />
          <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button type="text" icon="el-icon-refresh" @click="handleSynchronization(scope.row)">同步</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

  </div>
</template>

<script setup name="EjusdemWork">
const { proxy } = getCurrentInstance();
import { ElMessage, ElMessageBox } from 'element-plus'
import { userDepartment, userId, dtRefresh, dtRefreshall } from '@/api/system/dept.js'
import { ref } from 'vue';
const deptName = ref("");
const deptOptions = ref(undefined);
const loading = ref(false);
const userList = ref([])
const total = ref(0);
const ids = ref([]);
const defaultProps = {
  children: 'children',
  label: 'label',
}

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    userName: undefined,
    phonenumber: undefined,
    status: undefined,
    deptId: undefined
  },
});

const { queryParams } = toRefs(data);




/** 通过条件过滤节点  */
const filterNode = (value, data) => {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
};


/** 根据名称筛选部门树 */
watch(deptName, val => {
  proxy.$refs["deptTreeRef"].filter(val);
});

/** 查询部门下拉树结构 */
function getDeptTree() {
  userDepartment().then(response => {
    deptOptions.value = response.data;
  });
};

/** 查询用户列表 */
function getList() {
  loading.value = true;
  userId(queryParams.value).then(res => {
    loading.value = false;
    userList.value = res.data.list;
    total.value = res.data.total;
  });
};


/** 节点单击事件 */
function handleNodeClick(data) {
  console.log(data.id, '11')
  queryParams.value.deptId = data.id;
  getList();
};

/** 选择条数  */
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.userId);
};


/** 同步单个按钮操作 */
function handleSynchronization(row) {
  const nickName = row.nickName;
  ElMessageBox.confirm(
    '是否确认同步用户姓名为"' + nickName + '"的数据项?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      let userIds = [];
      userIds.push(row.userId);
      dtRefresh(userIds).then(() => {
        getList();
        proxy.$modal.msgSuccess("同步成功");
      });
    })
}

/** 同步多个 */
function handleSynchronizationAll() {
  ElMessageBox.confirm(
    "是否确认同步选中用户数据项?",
    "警告",
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      dtRefresh(ids.value).then(() => {
        getList();
        proxy.$modal.msgSuccess("同步成功");
      });
    })
}




getDeptTree()

</script>